iT邦幫忙

0

DAY 4 : 建立 To-Do List App 基本畫面

  • 分享至 

  • xImage
  •  
  1. 建立 Flutter 專案
    • 打開 Android Studio → 選 New Flutter Project → Flutter Application
    填寫專案資訊:
    Project Name:to_do_app
    Flutter SDK Path:填入你已安裝的 Flutter SDK 路徑
    Project Location:選擇一個資料夾
    點 Next → Finish,等待專案建立完成

  2. 確認專案可運行
    • 開啟模擬器(Pixel 5)
    • 在 IDE 上方選擇剛啟動的模擬器作為目標設備
    • 點擊 Run(綠色播放鍵)
    • 等 Flutter 範例 App 跑起來 → 你會看到預設的「Counter」畫面

  3. 修改 App 名稱
    • 打開 lib/main.dart
    • 找到 MaterialApp 的 title 欄位

  4. 調整首頁示範文字與刪除預設計數器
    • 刪除預設計數器變數 _counter 與方法 _incrementCounter()
    • 將首頁原本的文字改為示範文字(如「買牛奶」、「寫作業」、「運動」)
    • 建立 ListView 的外層結構,雖然今天仍是靜態顯示
    • 確保頁面修改後程式仍可編譯運行

https://ithelp.ithome.com.tw/upload/images/20250923/20178900hGJRJazX9q.png

畫面跑起來會有個預設的計數器,每當按一次 "+" 按鈕,預設計數器就會增加一次次數
https://ithelp.ithome.com.tw/upload/images/20250923/20178900m1nDueHzjA.png

今天的目標是讓 To_Do_List App 預覽畫面可以在模擬器跑起來


圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言